<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
            <el-form-item label="姓名" prop="userName">
                <el-input v-model="queryParams.userName" placeholder="请输入姓名" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <!-- <el-form-item label="身份证号" prop="idCard">
                <el-input v-model="queryParams.idCard" placeholder="请输入身份证号" clearable @keyup.enter.native="handleQuery" />
            </el-form-item> -->

            <el-form-item label="产权情况" prop="propertyRightsSituation">
                <el-select v-model="queryParams.propertyRightsSituation" placeholder="请选择产权情况" clearable style="width: 240px">
                    <el-option label="自有" value="0" />
                    <el-option label="购买" value="1" />
                    <el-option label="其他" value="2" />
                </el-select>
            </el-form-item>

            <el-form-item label="状态" prop="auditStatus">
                <el-select v-model="queryParams.auditStatus" placeholder="请选择状态" clearable style="width: 240px">
                    <el-option label="未申请" value="0" />
                    <el-option label="申请改造审核中" value="1" />
                    <el-option label="预核准" value="2" />
                    <el-option label="待核准" value="3" />
                    <el-option label="改造中" value="4" />
                    <el-option label="申请验收" value="5" />
                    <el-option label="验收通过" value="6" />
                    <el-option label="已发放补贴" value="7" />
                    <el-option label="已查收" value="8" />
                    <el-option label="已完结" value="9" />
                </el-select>
            </el-form-item>
            <el-form-item label="产权人姓名" prop="propertyRightName">
                <el-input v-model="queryParams.propertyRightName" placeholder="请输入产权人姓名" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <!-- <el-form-item label="房屋结构 等级  B  C  D" prop="roomStructure">
                <el-input v-model="queryParams.roomStructure" placeholder="请输入房屋结构 等级  B  C  D" clearable @keyup.enter.native="handleQuery" />
            </el-form-item> -->
            <!-- <el-form-item label="上传资料:1、申请人与房屋产权人的关系证明(①一致的传房产证②不一致的传买卖合或公证书或其他证明材料)申请人身份证正反面。
不在产权证范围内的房屋结构(①不符合改造的如彩钢房等②)符合改造的砖混结构等及对应建筑面积)" prop="nowFiles">
                <el-input v-model="queryParams.nowFiles" placeholder="请输入上传资料:1、申请人与房屋产权人的关系证明(①一致的传房产证②不一致的传买卖合或公证书或其他证明材料)申请人身份证正反面。
不在产权证范围内的房屋结构(①不符合改造的如彩钢房等②)符合改造的砖混结构等及对应建筑面积)" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="房屋现状主房正面照" prop="nowMainRoomPositiveImg">
                <el-input v-model="queryParams.nowMainRoomPositiveImg" placeholder="请输入房屋现状主房正面照" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="房屋现状主房背面照" prop="nowMainRoomNegativeImg">
                <el-input v-model="queryParams.nowMainRoomNegativeImg" placeholder="请输入房屋现状主房背面照" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="房屋现状凉房正面照" prop="nowOtherRoomPositiveImg">
                <el-input v-model="queryParams.nowOtherRoomPositiveImg" placeholder="请输入房屋现状凉房正面照" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="房屋现状凉房背面照" prop="nowOtherRoomNegativeImg">
                <el-input v-model="queryParams.nowOtherRoomNegativeImg" placeholder="请输入房屋现状凉房背面照" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="房屋现状院墙原有样貌" prop="nowWallImg">
                <el-input v-model="queryParams.nowWallImg" placeholder="请输入房屋现状院墙原有样貌" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="房屋现状大门门墩" prop="nowGateImg">
                <el-input v-model="queryParams.nowGateImg" placeholder="请输入房屋现状大门门墩" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="房屋现状其他照片" prop="nowOtherImg">
                <el-input v-model="queryParams.nowOtherImg" placeholder="请输入房屋现状其他照片" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="合同" prop="contract">
                <el-input v-model="queryParams.contract" placeholder="请输入合同" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="保险" prop="insurance">
                <el-input v-model="queryParams.insurance" placeholder="请输入保险" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="承诺书" prop="commitmentLetter">
                <el-input v-model="queryParams.commitmentLetter" placeholder="请输入承诺书" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="三方第一次监管记录" prop="firstSupervise">
                <el-input v-model="queryParams.firstSupervise" placeholder="请输入三方第一次监管记录" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="三方第二次监管记录" prop="secondSupervise">
                <el-input v-model="queryParams.secondSupervise" placeholder="请输入三方第二次监管记录" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="开工时间" prop="startTime">
                <el-date-picker clearable v-model="queryParams.startTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择开工时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="竣工时间" prop="endTime">
                <el-date-picker clearable v-model="queryParams.endTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择竣工时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="完工后主房正面照" prop="overMainRoomPositiveImg">
                <el-input v-model="queryParams.overMainRoomPositiveImg" placeholder="请输入完工后主房正面照" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="完工后主房背面照" prop="overMainRoomNegativeImg">
                <el-input v-model="queryParams.overMainRoomNegativeImg" placeholder="请输入完工后主房背面照" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="完工后凉房正面照" prop="overOtherRoomPositiveImg">
                <el-input v-model="queryParams.overOtherRoomPositiveImg" placeholder="请输入完工后凉房正面照" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="完工后凉房背面照" prop="overOtherRoomNegativeImg">
                <el-input v-model="queryParams.overOtherRoomNegativeImg" placeholder="请输入完工后凉房背面照" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="完工后院墙原有样貌" prop="overWallImg">
                <el-input v-model="queryParams.overWallImg" placeholder="请输入完工后院墙原有样貌" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="完工后大门门墩" prop="overGateImg">
                <el-input v-model="queryParams.overGateImg" placeholder="请输入完工后大门门墩" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="户名" prop="bankName">
                <el-input v-model="queryParams.bankName" placeholder="请输入户名" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="银行账号" prop="bankAccount">
                <el-input v-model="queryParams.bankAccount" placeholder="请输入银行账号" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="平方米" prop="squareMeter">
                <el-input v-model="queryParams.squareMeter" placeholder="请输入平方米" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="单价" prop="price">
                <el-input v-model="queryParams.price" placeholder="请输入单价" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="总金额" prop="countPrice">
                <el-input v-model="queryParams.countPrice" placeholder="请输入总金额" clearable @keyup.enter.native="handleQuery" />
            </el-form-item> -->
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <!-- <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:info:add']">新增</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
                    v-hasPermi="['system:info:edit']">修改</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
                    v-hasPermi="['system:info:remove']">删除</el-button>
            </el-col> -->
            <!-- <el-col :span="1.5">
                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
                    v-hasPermi="['system:info:export']">导出</el-button>
            </el-col> -->
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="infoList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <!-- <el-table-column label="ID" align="center" prop="id" /> -->
            <el-table-column label="编号" align="center" prop="code" />
            <el-table-column label="姓名" align="center" prop="userName" />
            <!-- <el-table-column label="身份证号" align="center" prop="idCard" /> -->
            <!-- <el-table-column label="手机号" align="center" prop="phone" /> -->
            <!-- <el-table-column label="密码" align="center" prop="password" /> -->
            <!-- 0-未申请 1-申请改造 2-预核准 3-核准 4-改造中 5-申请验收 6-验收通过 7-已发放补贴  -->
            <el-table-column label="房屋坐落地址" align="center" prop="address" />
            <!-- <el-table-column label="土地面积" align="center" prop="landArea" />
            <el-table-column label="住房面积(主房)" align="center" prop="roomAreaMain" />
            <el-table-column label="住房面积(主房) 是否产权内  1-是 0-否" align="center" prop="roomAreaMainFlag" />
            <el-table-column label="住房面积(凉房)" align="center" prop="roomAreaOther" />
            <el-table-column label="住房面积(凉房) 是否产权内  1-是 0-否" align="center" prop="roomAreaOtherFlag" />
            <el-table-column label="合计面积" align="center" prop="allArea" /> -->
            <el-table-column label="产权情况" align="center">
                <template slot-scope="scope">
                    <div v-if="scope.row.propertyRightsSituation==0">自有</div>
                    <div v-if="scope.row.propertyRightsSituation==1">购买</div>
                    <div v-if="scope.row.propertyRightsSituation==2">其他</div>
                </template>
            </el-table-column>
            <el-table-column label="产权人姓名" align="center" prop="propertyRightName" />
            <el-table-column label="状态" align="center">
                <template slot-scope="scope">
                    <div v-if="scope.row.auditStatus==0">未申请</div>
                    <div v-if="scope.row.auditStatus==1">申请改造审核中</div>
                    <div v-if="scope.row.auditStatus==2">预核准</div>
                    <div v-if="scope.row.auditStatus==3">待核准</div>
                    <div v-if="scope.row.auditStatus==4">改造中</div>
                    <div v-if="scope.row.auditStatus==5">申请验收</div>
                    <div v-if="scope.row.auditStatus==6">验收通过</div>
                    <div v-if="scope.row.auditStatus==7">已发放补贴</div>
                    <div v-if="scope.row.auditStatus==8">已查收</div>
                    <div v-if="scope.row.auditStatus==9">已完结</div>
                </template>
            </el-table-column>

            <el-table-column label="类型" align="center">
                <template slot-scope="scope">
                    <div v-if="scope.row.roomType=='0'">房屋改造</div>
                    <div v-if="scope.row.roomType=='1'">原址新建房屋</div>
                    <div v-if="scope.row.roomType=='2'">异地新建房屋</div>
                    <div v-if="scope.row.roomType=='3'">房屋拆除</div>
                    <div v-if="scope.row.roomType=='4'">楼房新建</div>
                </template>
            </el-table-column>
            <!-- <el-table-column label="房屋结构 等级  B  C  D" align="center" prop="roomStructure" />
            <el-table-column label="上传资料:1、申请人与房屋产权人的关系证明(①一致的传房产证②不一致的传买卖合或公证书或其他证明材料)申请人身份证正反面。
不在产权证范围内的房屋结构(①不符合改造的如彩钢房等②)符合改造的砖混结构等及对应建筑面积)" align="center" prop="nowFiles" />
            <el-table-column label="房屋现状主房正面照" align="center" prop="nowMainRoomPositiveImg" />
            <el-table-column label="房屋现状主房背面照" align="center" prop="nowMainRoomNegativeImg" />
            <el-table-column label="房屋现状凉房正面照" align="center" prop="nowOtherRoomPositiveImg" />
            <el-table-column label="房屋现状凉房背面照" align="center" prop="nowOtherRoomNegativeImg" />
            <el-table-column label="房屋现状院墙原有样貌" align="center" prop="nowWallImg" />
            <el-table-column label="房屋现状大门门墩" align="center" prop="nowGateImg" />
            <el-table-column label="房屋现状其他照片" align="center" prop="nowOtherImg" />
            <el-table-column label="合同" align="center" prop="contract" />
            <el-table-column label="保险" align="center" prop="insurance" />
            <el-table-column label="承诺书" align="center" prop="commitmentLetter" />
            <el-table-column label="三方第一次监管记录" align="center" prop="firstSupervise" />
            <el-table-column label="三方第二次监管记录" align="center" prop="secondSupervise" />
            <el-table-column label="开工时间" align="center" prop="startTime" width="180">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.startTime, '{y}-{m}-{d}') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="竣工时间" align="center" prop="endTime" width="180">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.endTime, '{y}-{m}-{d}') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="完工后主房正面照" align="center" prop="overMainRoomPositiveImg" />
            <el-table-column label="完工后主房背面照" align="center" prop="overMainRoomNegativeImg" />
            <el-table-column label="完工后凉房正面照" align="center" prop="overOtherRoomPositiveImg" />
            <el-table-column label="完工后凉房背面照" align="center" prop="overOtherRoomNegativeImg" />
            <el-table-column label="完工后院墙原有样貌" align="center" prop="overWallImg" />
            <el-table-column label="完工后大门门墩" align="center" prop="overGateImg" />
            <el-table-column label="户名" align="center" prop="bankName" />
            <el-table-column label="开户行" align="center" prop="bankType" />
            <el-table-column label="银行账号" align="center" prop="bankAccount" />
            <el-table-column label="平方米" align="center" prop="squareMeter" />
            <el-table-column label="单价" align="center" prop="price" />
            <el-table-column label="总金额" align="center" prop="countPrice" /> -->
            <el-table-column label="申请日期" align="center" prop="aTime" />
            <el-table-column label="预核准日期" align="center" prop="bTime" />
            <el-table-column label="核准日期" align="center" prop="cTime" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <!-- <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                        v-hasPermi="['system:info:edit']">修改</el-button>
                    <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                        v-hasPermi="['system:info:remove']">删除</el-button> -->
                    <el-button v-if="scope.row.auditStatus<=1" size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                        v-hasPermi="['system:info:remove']">删除</el-button>
                    <el-button v-if="['1','3','5','6','8','9'].includes(scope.row.auditStatus)" size="mini" type="text" icon="el-icon-document"
                        @click="handleDetail(scope.row)">
                        <span v-if="scope.row.auditStatus==1">预核准</span>
                        <span v-if="scope.row.auditStatus==3">核准</span>
                        <span v-if="scope.row.auditStatus==5">验收</span>
                        <span v-if="scope.row.auditStatus==6">上传流水证明</span>
                        <span v-if="scope.row.auditStatus==8">完结</span>
                        <span v-if="scope.row.auditStatus==9">详情</span>
                    </el-button>

                    <el-button v-if="scope.row.auditStatus==2||scope.row.auditStatus==3" size="mini" type="text" icon="el-icon-receiving"
                        @click="downDeriveWord(scope.row)">下载核准表模板</el-button>
                    <el-button v-if="scope.row.auditStatus==2||scope.row.auditStatus==3" size="mini" type="text" icon="el-icon-receiving"
                        @click="handleSerialNum(scope.row,'核准表','word1','2')">上传核准表</el-button>
                    <el-button v-if="scope.row.auditStatus==4||scope.row.auditStatus==5" size="mini" type="text" icon="el-icon-receiving"
                        @click="downDeriveWord2(scope.row)">下载申请验收表模板</el-button>
                    <el-button v-if="scope.row.auditStatus==4||scope.row.auditStatus==5" size="mini" type="text" icon="el-icon-receiving"
                        @click="handleSerialNum(scope.row,'申请验收表','word2','5')">上传申请验收表</el-button>

                    <!-- 0-未申请 1-申请改造 2-预核准 3-核准 4-改造中 5-申请验收 6-验收通过 7-已发放补贴 -->
                    <!-- <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)"
                        v-hasPermi="['system:user:resetPwd', 'system:user:edit']">
                        <el-button size="mini" type="text" icon="el-icon-d-arrow-right">预审核</el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="handleResetPwd" icon="el-icon-check" @click="handlePreApproval(scope.row,'2')">审核通过</el-dropdown-item>
                            <el-dropdown-item command="handleAuthRole" icon="el-icon-close" @click="handlePreApproval(scope.row)">审核拒绝</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown> -->
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

        <!-- 添加或修改房屋改造申请对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="编号" prop="code">
                    <el-input v-model="form.code" placeholder="请输入编号" />
                </el-form-item>
                <el-form-item label="姓名" prop="userName">
                    <el-input v-model="form.userName" placeholder="请输入姓名" />
                </el-form-item>
                <el-form-item label="身份证号" prop="idCard">
                    <el-input v-model="form.idCard" placeholder="请输入身份证号" />
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="form.phone" placeholder="请输入手机号" />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="form.password" placeholder="请输入密码" />
                </el-form-item>
                <el-form-item label="房屋坐落地址" prop="address">
                    <el-input v-model="form.address" placeholder="请输入房屋坐落地址" />
                </el-form-item>
                <el-form-item label="土地面积" prop="landArea">
                    <el-input v-model="form.landArea" placeholder="请输入土地面积" />
                </el-form-item>
                <el-form-item label="住房面积(主房)" prop="roomAreaMain">
                    <el-input v-model="form.roomAreaMain" placeholder="请输入住房面积(主房)" />
                </el-form-item>
                <el-form-item label="住房面积(主房) 是否产权内  1-是 0-否" prop="roomAreaMainFlag">
                    <el-input v-model="form.roomAreaMainFlag" placeholder="请输入住房面积(主房) 是否产权内  1-是 0-否" />
                </el-form-item>
                <el-form-item label="住房面积(凉房)" prop="roomAreaOther">
                    <el-input v-model="form.roomAreaOther" placeholder="请输入住房面积(凉房)" />
                </el-form-item>
                <el-form-item label="住房面积(凉房) 是否产权内  1-是 0-否" prop="roomAreaOtherFlag">
                    <el-input v-model="form.roomAreaOtherFlag" placeholder="请输入住房面积(凉房) 是否产权内  1-是 0-否" />
                </el-form-item>
                <el-form-item label="合计面积" prop="allArea">
                    <el-input v-model="form.allArea" placeholder="请输入合计面积" />
                </el-form-item>
                <el-form-item label="产权情况 0-自有  1-购买 2-其他" prop="propertyRightsSituation">
                    <el-input v-model="form.propertyRightsSituation" placeholder="请输入产权情况 0-自有  1-购买 2-其他" />
                </el-form-item>
                <el-form-item label="产权人姓名" prop="propertyRightName">
                    <el-input v-model="form.propertyRightName" placeholder="请输入产权人姓名" />
                </el-form-item>
                <el-form-item label="房屋结构 等级  B  C  D" prop="roomStructure">
                    <el-input v-model="form.roomStructure" placeholder="请输入房屋结构 等级  B  C  D" />
                </el-form-item>
                <el-form-item label="上传资料:1、申请人与房屋产权人的关系证明(①一致的传房产证②不一致的传买卖合或公证书或其他证明材料)申请人身份证正反面。
不在产权证范围内的房屋结构(①不符合改造的如彩钢房等②)符合改造的砖混结构等及对应建筑面积)" prop="nowFiles">
                    <el-input v-model="form.nowFiles" placeholder="请输入上传资料:1、申请人与房屋产权人的关系证明(①一致的传房产证②不一致的传买卖合或公证书或其他证明材料)申请人身份证正反面。
不在产权证范围内的房屋结构(①不符合改造的如彩钢房等②)符合改造的砖混结构等及对应建筑面积)" />
                </el-form-item>
                <el-form-item label="房屋现状主房正面照" prop="nowMainRoomPositiveImg">
                    <el-input v-model="form.nowMainRoomPositiveImg" placeholder="请输入房屋现状主房正面照" />
                </el-form-item>
                <el-form-item label="房屋现状主房背面照" prop="nowMainRoomNegativeImg">
                    <el-input v-model="form.nowMainRoomNegativeImg" placeholder="请输入房屋现状主房背面照" />
                </el-form-item>
                <el-form-item label="房屋现状凉房正面照" prop="nowOtherRoomPositiveImg">
                    <el-input v-model="form.nowOtherRoomPositiveImg" placeholder="请输入房屋现状凉房正面照" />
                </el-form-item>
                <el-form-item label="房屋现状凉房背面照" prop="nowOtherRoomNegativeImg">
                    <el-input v-model="form.nowOtherRoomNegativeImg" placeholder="请输入房屋现状凉房背面照" />
                </el-form-item>
                <el-form-item label="房屋现状院墙原有样貌" prop="nowWallImg">
                    <el-input v-model="form.nowWallImg" placeholder="请输入房屋现状院墙原有样貌" />
                </el-form-item>
                <el-form-item label="房屋现状大门门墩" prop="nowGateImg">
                    <el-input v-model="form.nowGateImg" placeholder="请输入房屋现状大门门墩" />
                </el-form-item>
                <el-form-item label="房屋现状其他照片" prop="nowOtherImg">
                    <el-input v-model="form.nowOtherImg" placeholder="请输入房屋现状其他照片" />
                </el-form-item>
                <el-form-item label="合同" prop="contract">
                    <el-input v-model="form.contract" placeholder="请输入合同" />
                </el-form-item>
                <el-form-item label="保险" prop="insurance">
                    <el-input v-model="form.insurance" placeholder="请输入保险" />
                </el-form-item>
                <el-form-item label="承诺书" prop="commitmentLetter">
                    <el-input v-model="form.commitmentLetter" placeholder="请输入承诺书" />
                </el-form-item>
                <el-form-item label="三方第一次监管记录" prop="firstSupervise">
                    <el-input v-model="form.firstSupervise" placeholder="请输入三方第一次监管记录" />
                </el-form-item>
                <el-form-item label="三方第二次监管记录" prop="secondSupervise">
                    <el-input v-model="form.secondSupervise" placeholder="请输入三方第二次监管记录" />
                </el-form-item>
                <el-form-item label="开工时间" prop="startTime">
                    <el-date-picker clearable v-model="form.startTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择开工时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="竣工时间" prop="endTime">
                    <el-date-picker clearable v-model="form.endTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择竣工时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="完工后主房正面照" prop="overMainRoomPositiveImg">
                    <el-input v-model="form.overMainRoomPositiveImg" placeholder="请输入完工后主房正面照" />
                </el-form-item>
                <el-form-item label="完工后主房背面照" prop="overMainRoomNegativeImg">
                    <el-input v-model="form.overMainRoomNegativeImg" placeholder="请输入完工后主房背面照" />
                </el-form-item>
                <el-form-item label="完工后凉房正面照" prop="overOtherRoomPositiveImg">
                    <el-input v-model="form.overOtherRoomPositiveImg" placeholder="请输入完工后凉房正面照" />
                </el-form-item>
                <el-form-item label="完工后凉房背面照" prop="overOtherRoomNegativeImg">
                    <el-input v-model="form.overOtherRoomNegativeImg" placeholder="请输入完工后凉房背面照" />
                </el-form-item>
                <el-form-item label="完工后院墙原有样貌" prop="overWallImg">
                    <el-input v-model="form.overWallImg" placeholder="请输入完工后院墙原有样貌" />
                </el-form-item>
                <el-form-item label="完工后大门门墩" prop="overGateImg">
                    <el-input v-model="form.overGateImg" placeholder="请输入完工后大门门墩" />
                </el-form-item>
                <el-form-item label="户名" prop="bankName">
                    <el-input v-model="form.bankName" placeholder="请输入户名" />
                </el-form-item>
                <el-form-item label="开户行" prop="bankType">
                    <el-input v-model="form.bankType" placeholder="请输入银行账号" />
                </el-form-item>
                <el-form-item label="银行账号" prop="bankAccount">
                    <el-input v-model="form.bankAccount" placeholder="请输入银行账号" />
                </el-form-item>
                <el-form-item label="平方米" prop="squareMeter">
                    <el-input v-model="form.squareMeter" placeholder="请输入平方米" />
                </el-form-item>
                <el-form-item label="单价" prop="price">
                    <el-input v-model="form.price" placeholder="请输入单价" />
                </el-form-item>
                <el-form-item label="总金额" prop="countPrice">
                    <el-input v-model="form.countPrice" placeholder="请输入总金额" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>

        <!-- 房屋改造详情对话框 -->
        <el-dialog title="房屋改造申请详情" class="fromDetail" :visible.sync="openDetail" width="1200px" append-to-body>
            <table align="center" border="1" cellspacing="0px" width="1000" style="text-align: center;">

                <tr>
                    <th colspan="6" style="font-size:30px" v-if="form.roomType=='0'">南平房区既有房屋改造申请备案表 (试行）</th>
                    <th colspan="6" style="font-size:30px" v-if="form.roomType=='1'">南平房区原址新建房屋申请备案表(试行）</th>
                    <th colspan="6" style="font-size:30px" v-if="form.roomType=='2'">南平房区异地新建房屋申请表（试行）</th>
                    <th colspan="6" style="font-size:30px" v-if="form.roomType=='3'">南平房区 D 级房屋拆除申请与补贴核准表（试行）</th>
                    <th colspan="6" style="font-size:30px" v-if="form.roomType=='4'">南平房区原址新建楼房申请备案表(试行）</th>
                </tr>
                <tr height="50">
                    <td>姓名</td>
                    <td>{{form.userName}}</td>
                    <td colspan="2">公民身份证</td>
                    <td colspan="2">{{form.idCard}}</td>
                </tr>
                <tr height="50">
                    <td>家中人口数</td>
                    <td>4</td>
                    <td colspan="2">联系电话</td>
                    <td colspan="2">{{form.phone}}</td>
                </tr>
                <tr height="50">
                    <td rowspan="6">房屋基本情况</td>
                    <td colspan="2">房屋坐落</td>
                    <td colspan="3">{{form.address}}</td>
                </tr>
                <tr height="50">
                    <td colspan="2">土地面积</td>
                    <td colspan="2">{{form.allArea}}平方米</td>
                </tr>
                <tr height="50">
                    <td rowspan="2">建筑面积</td>
                    <td colspan="1">主房</td>
                    <td colspan="3">{{form.roomAreaMain}}平方米</td>
                </tr>
                <tr height="50">
                    <td colspan="1">凉房</td>
                    <td colspan="3">{{form.roomAreaOther}}平方米</td>
                </tr>
                <tr height="50">
                    <td colspan="2">产权情况及产权人姓名</td>
                    <td colspan="3">

                        <span v-if="form.propertyRightsSituation==0">自有</span>
                        <span v-if="form.propertyRightsSituation==1">购买</span>
                        <span v-if="form.propertyRightsSituation==2">其他</span>
                        <span>{{form.propertyRightName}}</span>
                    </td>
                </tr>
                <tr height="50">
                    <td colspan="2">房屋结构安全等级</td>
                    <td colspan="3">

                        <span>{{form.roomStructure}}</span>级
                        <!-- <span v-if="form.roomStructure==0">B级</span>
                            <span v-if="form.roomStructure==1">C级</span>
                            <span v-if="form.roomStructure==2">D级</span> -->
                    </td>
                </tr>
                <tr>
                    <td colspan="6" style="padding:20px">
                        <div style="text-indent: 34px;text-align: left;">
                            根据房屋结构安全等级划分，本人的房屋为
                            <span>{{form.roomStructure}}</span>级
                            <!-- <span v-if="form.roomStructure==0">B级</span>
                            <span v-if="form.roomStructure==1">C级</span>
                            <span v-if="form.roomStructure==2">D级</span> -->
                            级，需要进行的改 造为：
                            <div style="width:30px;height:15px;border:2px #eee solid;display: inline-block;"></div>
                            安全与功能改造
                            <div style="width:30px;height:15px;border:2px #eee solid;display: inline-block;"></div>
                            建筑节能与风貌改造。本人及家人（同 住人）将根据《杭锦旗锡尼镇南平房区建筑改造更新实施方案》规定 及主管部门统一要求自行实施改造并自负费用。改造过程中本人将严
                            格执行安全生产相关规定，维护相邻住户合法权益。
                        </div>
                        <div style="text-indent: 34px;text-align: left;">
                            上述内容是本人真实意思表示。
                        </div>
                        <div style="text-align: end;">
                            <span style="margin-right:100px">申请人：</span>
                            <span style="margin-right:30px">年</span>
                            <span style="margin-right:30px">月</span>
                            <span style="margin-right:0px">日</span>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="6">
                        <div style="height:200px;padding:20px;">主管部门意见(签字、盖章)</div>

                    </td>
                </tr>
                <tr style="line-height: 30px;">
                    <td colspan="2" style="padding:20px;">
                        <div>住建局</div>
                        <div style="text-align: left;">经办人</div>
                        <div style="text-align: end;">
                            <span style="margin-right:30px">年</span>
                            <span style="margin-right:30px">月</span>
                            <span style="margin-right:0px">日</span>
                        </div>
                    </td>
                    <td colspan="2" style="padding:20px;">
                        <div>自然资源局</div>
                        <div style="text-align: left;">经办人</div>
                        <div style="text-align: end;">
                            <span style="margin-right:30px">年</span>
                            <span style="margin-right:30px">月</span>
                            <span style="margin-right:0px">日</span>
                        </div>
                    </td>
                    <td colspan="2" style="padding:20px;">
                        <div>锡尼镇人民政府</div>
                        <div style="text-align: left;">经办人</div>
                        <div style="text-align: end;">
                            <span style="margin-right:30px">年</span>
                            <span style="margin-right:30px">月</span>
                            <span style="margin-right:0px">日</span>
                        </div>
                    </td>
                </tr>

                <!-- <td rowspan="12">休息</td> -->
            </table>
            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
                <el-row>
                    <template>
                        <div class="fromtitle">
                            <div>
                                预核准信息
                            </div>
                        </div>
                    <el-col :span="12">
                        <el-form-item label="编号" prop="code">
                            <div>{{form.code}}</div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="状态" prop="auditStatus">
                            <div v-if="form.auditStatus==0">未申请</div>
                            <div v-if="form.auditStatus==1">申请改造审核中</div>
                            <div v-if="form.auditStatus==2">预核准</div>
                            <div v-if="form.auditStatus==3">核准</div>
                            <div v-if="form.auditStatus==4">改造中</div>
                            <div v-if="form.auditStatus==5">申请验收</div>
                            <div v-if="form.auditStatus==6">验收通过</div>
                            <div v-if="form.auditStatus==7">已发放补贴</div>
                            <div v-if="form.auditStatus==8">已查收</div>
                            <div v-if="form.auditStatus==9">已完结</div>
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="6">
                        <el-form-item label="姓名" prop="userName">
                            <div>{{form.userName}}</div>
                        </el-form-item>
                    </el-col> -->
                    <!-- <el-col :span="6">
                        <el-form-item label="身份证号" prop="idCard">
                            <div>{{form.idCard}}</div>
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="12">
                        <el-form-item label="手机号" prop="phone">
                            <div>{{form.phone}}</div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="土地面积" prop="landArea">
                            <div>{{form.landArea}}</div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="合计面积" prop="allArea">
                            <div>{{form.allArea}}</div>
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="12">
                        <el-form-item label="房屋坐落地址" prop="address">
                            <div>{{form.address}}</div>
                        </el-form-item>
                    </el-col> -->
                    <!-- <el-col :span="6">
                        <el-form-item label="住房面积(主房)" prop="roomAreaMain">
                            <div>{{form.roomAreaMain}}</div>
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="6">
                        <el-form-item label="住房面积(主房) 是否产权内" prop="roomAreaMainFlag" label-width="200px">
                            <div v-if="form.roomAreaMainFlag==0">否</div>
                            <div v-if="form.roomAreaMainFlag==1">是</div>
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="6">
                        <el-form-item label="住房面积(凉房)" prop="roomAreaOther">
                            <div>{{form.roomAreaOther}}</div>
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="6">
                        <el-form-item label="住房面积(凉房) 是否产权内" prop="roomAreaOtherFlag" label-width="200px">
                            <div v-if="form.roomAreaOtherFlag==0">否</div>
                            <div v-if="form.roomAreaOtherFlag==1">是</div>
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="6">
                        <el-form-item label="产权情况" prop="propertyRightsSituation">
                            <div v-if="form.propertyRightsSituation==0">自有</div>
                            <div v-if="form.propertyRightsSituation==1">购买</div>
                            <div v-if="form.propertyRightsSituation==2">其他</div>
                        </el-form-item>
                    </el-col> -->
                    <!-- <el-col :span="6">
                        <el-form-item label="产权人姓名" prop="propertyRightName">
                            <div>{{form.propertyRightName}}</div>
                        </el-form-item>
                    </el-col> -->
                    <!-- <el-col :span="6">
                        <el-form-item label="房屋结构" prop="roomStructure">
                            <div v-if="form.roomStructure==0">B级</div>
                            <div v-if="form.roomStructure==1">C级</div>
                            <div v-if="form.roomStructure==2">D级</div>
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="24">
                        <el-form-item label="上传资料:" prop="nowFiles" label-width="160px">
                            <div>1、申请人与房屋产权人的关系证明(①一致的传房产证②不一致的传买卖合或公证书或其他证明材料)</div>
                            <div>2、申请人身份证正反面。</div>
                            <div>3、不在产权证范围内的房屋结构(①不符合改造的如彩钢房等②符合改造的砖混结构等及对应建筑面积)</div>
                            <el-image v-for="(item,index) in form.nowFiles?form.nowFiles.split(','):[]" :key="index"
                                style="width: 100px; height: 100px" :src="item" :preview-src-list="form.nowFiles?form.nowFiles.split(','):[]">
                            </el-image>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="房屋现状主房正面照" prop="nowMainRoomPositiveImg" label-width="160px">
                            <el-image v-for="(item,index) in form.nowMainRoomPositiveImg?form.nowMainRoomPositiveImg.split(','):[]" :key="index"
                                style="width: 100px; height: 100px" :src="item"
                                :preview-src-list="form.nowMainRoomPositiveImg?form.nowMainRoomPositiveImg.split(','):[]">
                            </el-image>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="房屋现状主房背面照" prop="nowMainRoomNegativeImg" label-width="160px">
                            <el-image v-for="(item,index) in form.nowMainRoomNegativeImg?form.nowMainRoomNegativeImg.split(','):[]" :key="index"
                                style="width: 100px; height: 100px" :src="item"
                                :preview-src-list="form.nowMainRoomNegativeImg?form.nowMainRoomNegativeImg.split(','):[]">
                            </el-image>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="房屋现状凉房正面照" prop="nowOtherRoomPositiveImg" label-width="160px">
                            <el-image v-for="(item,index) in form.nowOtherRoomPositiveImg?form.nowOtherRoomPositiveImg.split(','):[]" :key="index"
                                style="width: 100px; height: 100px" :src="item"
                                :preview-src-list="form.nowOtherRoomPositiveImg?form.nowOtherRoomPositiveImg.split(','):[]">
                            </el-image>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="房屋现状凉房背面照" prop="nowOtherRoomNegativeImg" label-width="160px">
                            <el-image v-for="(item,index) in form.nowOtherRoomNegativeImg?form.nowOtherRoomNegativeImg.split(','):[]" :key="index"
                                style="width: 100px; height: 100px" :src="item"
                                :preview-src-list="form.nowOtherRoomNegativeImg?form.nowOtherRoomNegativeImg.split(','):[]">
                            </el-image>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="房屋现状院墙原有样貌" prop="nowWallImg" label-width="160px">
                            <el-image v-for="(item,index) in form.nowWallImg?form.nowWallImg.split(','):[]" :key="index"
                                style="width: 100px; height: 100px" :src="item" :preview-src-list="form.nowWallImg?form.nowWallImg.split(','):[]">
                            </el-image>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="房屋现状大门门墩" prop="nowGateImg" label-width="160px">
                            <el-image v-for="(item,index) in form.nowGateImg?form.nowGateImg.split(','):[]" :key="index"
                                style="width: 100px; height: 100px" :src="item" :preview-src-list="form.nowGateImg?form.nowGateImg.split(','):[]">
                            </el-image>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="房屋现状其他照片" prop="nowOtherImg" label-width="160px">
                            <el-image v-for="(item,index) in form.nowOtherImg?form.nowOtherImg.split(','):[]" :key="index"
                                style="width: 100px; height: 100px" :src="item" :preview-src-list="form.nowOtherImg?form.nowOtherImg.split(','):[]">
                            </el-image>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" v-if="form.word1">
                        <el-form-item label="核准表" prop="word1" label-width="160px">
                            <el-image v-for="(item,index) in form.word1?form.word1.split(','):[]" :key="index" style="width: 100px; height: 100px"
                                :src="item" :preview-src-list="form.word1?form.word1.split(','):[]">
                            </el-image>
                        </el-form-item>
                    </el-col>
                    </template>
                    <!-- h5端上传完核准表后 -->
                    <template v-if="form.auditStatus>=3">
                        <div class="fromtitle">
                            <div>
                                核准信息
                            </div>
                        </div>
                        <el-col :span="12">
                            <el-form-item label="合同" prop="contract" label-width="160px">
                                <el-image v-for="(item,index) in form.contract?form.contract.split(','):[]" :key="index"
                                    style="width: 100px; height: 100px" :src="item" :preview-src-list="form.contract?form.contract.split(','):[]">
                                </el-image>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="保险" prop="insurance" label-width="160px">
                                <el-image v-for="(item,index) in form.insurance?form.insurance.split(','):[]" :key="index"
                                    style="width: 100px; height: 100px" :src="item" :preview-src-list="form.insurance?form.insurance.split(','):[]">
                                </el-image>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="承诺书" prop="commitmentLetter" label-width="160px">
                                <el-image v-for="(item,index) in form.commitmentLetter?form.commitmentLetter.split(','):[]" :key="index"
                                    style="width: 100px; height: 100px" :src="item"
                                    :preview-src-list="form.commitmentLetter?form.commitmentLetter.split(','):[]">
                                </el-image>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="三方第一次监管记录" prop="firstSupervise" label-width="160px">
                                <el-image v-for="(item,index) in form.firstSupervise?form.firstSupervise.split(','):[]" :key="index"
                                    style="width: 100px; height: 100px" :src="item"
                                    :preview-src-list="form.firstSupervise?form.firstSupervise.split(','):[]">
                                </el-image>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="三方第二次监管记录" prop="secondSupervise" label-width="160px">
                                <el-image v-for="(item,index) in form.secondSupervise?form.secondSupervise.split(','):[]" :key="index"
                                    style="width: 100px; height: 100px" :src="item"
                                    :preview-src-list="form.secondSupervise?form.secondSupervise.split(','):[]">
                                </el-image>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="开工时间" prop="startTime" label-width="160px">
                                <span>{{ parseTime(form.startTime, '{y}-{m}-{d}') }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="竣工时间" prop="endTime" label-width="160px">
                                <span>{{ parseTime(form.endTime, '{y}-{m}-{d}') }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="完工后主房正面照" prop="overMainRoomPositiveImg" label-width="160px">
                                <el-image v-for="(item,index) in form.overMainRoomPositiveImg?form.overMainRoomPositiveImg.split(','):[]" :key="index"
                                    style="width: 100px; height: 100px" :src="item"
                                    :preview-src-list="form.overMainRoomPositiveImg?form.overMainRoomPositiveImg.split(','):[]">
                                </el-image>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="完工后主房背面照" prop="overMainRoomNegativeImg" label-width="160px">
                                <el-image v-for="(item,index) in form.overMainRoomNegativeImg?form.overMainRoomNegativeImg.split(','):[]" :key="index"
                                    style="width: 100px; height: 100px" :src="item"
                                    :preview-src-list="form.overMainRoomNegativeImg?form.overMainRoomNegativeImg.split(','):[]">
                                </el-image>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="完工后凉房正面照" prop="overOtherRoomPositiveImg" label-width="160px">
                                <el-image v-for="(item,index) in form.overOtherRoomPositiveImg?form.overOtherRoomPositiveImg.split(','):[]"
                                    :key="index" style="width: 100px; height: 100px" :src="item"
                                    :preview-src-list="form.overOtherRoomPositiveImg?form.overOtherRoomPositiveImg.split(','):[]">
                                </el-image>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="完工后凉房背面照" prop="overOtherRoomNegativeImg" label-width="160px">
                                <el-image v-for="(item,index) in form.overOtherRoomNegativeImg?form.overOtherRoomNegativeImg.split(','):[]"
                                    :key="index" style="width: 100px; height: 100px" :src="item"
                                    :preview-src-list="form.overOtherRoomNegativeImg?form.overOtherRoomNegativeImg.split(','):[]">
                                </el-image>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="完工后院墙原有样貌" prop="overWallImg" label-width="160px">
                                <el-image v-for="(item,index) in form.overWallImg?form.overWallImg.split(','):[]" :key="index"
                                    style="width: 100px; height: 100px" :src="item"
                                    :preview-src-list="form.overWallImg?form.overWallImg.split(','):[]">
                                </el-image>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="完工后大门门墩" prop="overGateImg" label-width="160px">
                                <el-image v-for="(item,index) in form.overGateImg?form.overGateImg.split(','):[]" :key="index"
                                    style="width: 100px; height: 100px" :src="item"
                                    :preview-src-list="form.overGateImg?form.overGateImg.split(','):[]">
                                </el-image>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="户名" prop="bankName">
                                <div>{{form.bankName}}</div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="银行账号" prop="bankAccount">
                                <div>{{form.bankAccount}}</div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="开户行" prop="bankType">
                                <div>{{form.bankType}}</div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="平方米" prop="squareMeter">
                                <div>{{form.squareMeter}}</div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="单价" prop="price">
                                <div>{{form.price}}</div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="总金额" prop="countPrice">
                                <div>{{form.countPrice}}</div>
                            </el-form-item>
                        </el-col>
                    </template>
                    <!-- h5端上传完申请验收表后 -->
                    <template v-if=" form.auditStatus>=5">

                        <div class="fromtitle">
                            <div>
                                验收信息
                            </div>
                        </div>
                        <el-col :span="24">
                            <el-form-item label="申请验收表" prop="word2" label-width="160px">
                                <el-image v-for="(item,index) in form.word2?form.word2.split(','):[]" :key="index" style="width: 100px; height: 100px"
                                    :src="item" :preview-src-list="form.word2?form.word2.split(','):[]">
                                </el-image>
                            </el-form-item>
                        </el-col>
                    </template>
                    <template v-if=" form.auditStatus>=7">

                        <div class="fromtitle">
                            <div>
                                流水信息
                            </div>
                        </div>
                        <el-col :span="24">
                            
                            <el-form-item label="流水证明" prop="serialNum" label-width="160px">
                                <el-image v-for="(item,index) in form.serialNum?form.serialNum.split(','):[]" :key="index"
                                    style="width: 100px; height: 100px" :src="item" :preview-src-list="form.serialNum?form.serialNum.split(','):[]">
                                </el-image>
                            </el-form-item>
                        </el-col>
                    </template>
                    <template v-if=" form.auditStatus>=8">

                        <div class="fromtitle">
                            <div>
                                查收信息
                            </div>
                        </div>
                        <el-col :span="24">
                            <el-form-item label="查收证明" prop="serialImg" label-width="160px">
                                <el-image v-for="(item,index) in form.serialImg?form.serialImg.split(','):[]" :key="index"
                                    style="width: 100px; height: 100px" :src="item" :preview-src-list="form.serialImg?form.serialImg.split(','):[]">
                                </el-image>
                            </el-form-item>
                        </el-col>
                    </template>

                        <div class="fromtitle">
                            <div>
                                审核时间
                            </div>
                        </div>
                    <el-col :span="8" v-if="form.aTime">
                        <el-form-item label="申请提交日期" prop="countPrice">
                            <div>{{form.aTime}}</div>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="预核准日期" prop="countPrice">
                            <div>{{form.bTime}}</div>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="核准日期" prop="countPrice">
                            <div>{{form.cTime}}</div>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">

                <el-button v-if="form.auditStatus==1" type="primary" @click="handlePreApproval(form,'2')">预核准通过</el-button>
                <el-button v-if="form.auditStatus==3" type="primary" @click="handlePreApproval(form,'4')">核准</el-button>
                <el-button v-if="form.auditStatus==5" type="primary" @click="handlePreApproval(form,'6')">验收通过</el-button>
                <el-button v-if="form.auditStatus==6" type="primary" @click="handleSerialNum(form,'流水证明','serialNum','7')">上传流水证明</el-button>
                <el-button v-if="form.auditStatus==8" type="primary" @click="handlePreApproval(form,'9')">完结</el-button>

                <el-button v-if="['1','3','5','6','8'].includes(form.auditStatus)" type="danger" plain @click="handleAuditStatusBack()">
                    退回
                </el-button>

                <!-- <el-button @click="openDetail=false">返回</el-button> -->
            </div>
        </el-dialog>

        <!-- 上传流水证明 -->
        <el-dialog :title="'上传'+filelLabel" :visible.sync="openSerial" width="800px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                <el-form-item :label="'上传'+filelLabel" prop="code">
                    <el-upload ref="upload" list-type="picture-card" :file-list="fileList" :limit="fileLimitNum"
                        :action="baseUrl+ '/api/system/info/upload'" :on-remove="handleRemove" :on-success="handleFileSuccess"
                        :on-exceed="handleExceed">
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__tip text-center" slot="tip"></div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitFormSerial">确 定</el-button>
                <el-button @click="cancelSerial">取 消</el-button>
            </div>
        </el-dialog>
        <!-- 预核准并添加房屋等级 -->
        <el-dialog title="预核准并添加房屋等级" :visible.sync="showroomStructure" width="800px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="房屋结构" prop="roomStructure">
                    <el-radio-group v-model="form.roomStructure">
                        <el-radio label="B">B级</el-radio>
                        <el-radio label="C">C级</el-radio>
                        <el-radio label="D">D级</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitroomStructure">确 定</el-button>
                <el-button @click="cancelSerial">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { listInfo, getInfo, delInfo, addInfo, updateInfo, downFile } from "@/api/house/info";

export default {
    name: "Info",
    data() {
        return {
            baseUrl: process.env.VUE_APP_BASE_API,
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 房屋改造申请表格数据
            infoList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                code: null,
                userName: null,
                idCard: null,
                phone: null,
                password: null,
                auditStatus: null,
                address: null,
                landArea: null,
                roomAreaMain: null,
                roomAreaMainFlag: null,
                roomAreaOther: null,
                roomAreaOtherFlag: null,
                allArea: null,
                propertyRightsSituation: null,
                propertyRightName: null,
                roomStructure: null,
                nowFiles: null,
                nowMainRoomPositiveImg: null,
                nowMainRoomNegativeImg: null,
                nowOtherRoomPositiveImg: null,
                nowOtherRoomNegativeImg: null,
                nowWallImg: null,
                nowGateImg: null,
                nowOtherImg: null,
                contract: null,
                insurance: null,
                commitmentLetter: null,
                firstSupervise: null,
                secondSupervise: null,
                startTime: null,
                endTime: null,
                overMainRoomPositiveImg: null,
                overMainRoomNegativeImg: null,
                overOtherRoomPositiveImg: null,
                overOtherRoomNegativeImg: null,
                overWallImg: null,
                overGateImg: null,
                bankName: null,
                bankType: null,
                bankAccount: null,
                squareMeter: null,
                price: null,
                countPrice: null
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                roomStructure: [
                    { required: true, message: '请选择房屋等级', trigger: 'change' }
                ],
                code: [
                    { required: true, message: '请上传文件', trigger: 'change' }
                ],
            },
            // 是否显示详情弹出层
            openDetail: false,
            openSerial: false,
            roomStructure: false,
            dialogImageUrl: '',
            dialogVisible: false,
            fileList: [],
            showroomStructure: false,
            fileLimitNum: 3,
            filelLabel: null,
            filelKey: null,
            filelauditStatus: null,
        };
    },
    created() {
        this.getList();
    },
    methods: {
        /** 查询房屋改造申请列表 */
        getList() {
            this.loading = true;
            listInfo(this.queryParams).then(response => {
                this.infoList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                id: null,
                code: null,
                userName: null,
                idCard: null,
                phone: null,
                password: null,
                auditStatus: null,
                address: null,
                landArea: null,
                roomAreaMain: null,
                roomAreaMainFlag: null,
                roomAreaOther: null,
                roomAreaOtherFlag: null,
                allArea: null,
                propertyRightsSituation: null,
                propertyRightName: null,
                roomStructure: null,
                nowFiles: null,
                nowMainRoomPositiveImg: null,
                nowMainRoomNegativeImg: null,
                nowOtherRoomPositiveImg: null,
                nowOtherRoomNegativeImg: null,
                nowWallImg: null,
                nowGateImg: null,
                nowOtherImg: null,
                contract: null,
                insurance: null,
                commitmentLetter: null,
                firstSupervise: null,
                secondSupervise: null,
                startTime: null,
                endTime: null,
                overMainRoomPositiveImg: null,
                overMainRoomNegativeImg: null,
                overOtherRoomPositiveImg: null,
                overOtherRoomNegativeImg: null,
                overWallImg: null,
                overGateImg: null,
                bankName: null,
                bankType: null,
                bankAccount: null,
                squareMeter: null,
                price: null,
                countPrice: null
            };
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "添加房屋改造申请";
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            const id = row.id || this.ids
            getInfo(id).then(response => {
                this.form = response.data;
                this.open = true;
                this.title = "修改房屋改造申请";
            });
        },
        handlePreApproval(row, value) {
            let that = this
            if (value == '2') {
                this.showroomStructure = true
                this.serialId = row.id
            }
            else {
                const ids = row.id || this.ids;
                this.$modal.confirm('确认执行此操作？').then(function () {
                    updateInfo({ id: ids, auditStatus: value }).then(response => {
                        that.$modal.msgSuccess("审核成功");
                        that.getList();
                        that.openDetail = false;
                    });
                })
            }
        },
        // 查看详情
        handleDetail(row) {
            const id = row.id || this.ids
            getInfo(id).then(response => {
                this.form = response.data;
                this.openDetail = true;
                this.title = "房屋改造申请";
            });
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.form.id != null) {
                        updateInfo(this.form).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                            this.getList();
                        });
                    } else {
                        addInfo(this.form).then(response => {
                            this.$modal.msgSuccess("新增成功");
                            this.open = false;
                            this.getList();
                        });
                    }
                }
            });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const ids = row.id || this.ids;
            this.$modal.confirm('是否确认删除房屋改造申请编号为"' + ids + '"的数据项？').then(function () {
                return delInfo(ids);
            }).then(() => {
                this.getList();
                this.$modal.msgSuccess("删除成功");
            }).catch(() => { });
        },
        handleAuditStatusBack() {
            let that = this
            this.$modal.confirm('是否确认退回此条数据？').then(function () {
                // return delInfo(ids);
                updateInfo({
                    id: that.form.id,
                    auditStatus: Number(Number(that.form.auditStatus) - 1)
                }).then(response => {
                    that.$modal.msgSuccess("退回成功");
                    that.getList();
                    that.showroomStructure = false
                    that.openDetail = false;
                });

            })
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download('system/info/export', {
                ...this.queryParams
            }, `info_${new Date().getTime()}.xlsx`)
        },
        // 下载
        downDeriveWord(row) {
            downFile({
                id: row.id
            }).then(val => {
                console.log(val);
                window.open(val.data,'_blank')
            })
        },
        // 下载
        downDeriveWord2(row) {
            downFile2({
                id: row.id
            }).then(val => {
                console.log(val);
                window.open(val.data,'_blank')
            })
        },
        // 上传流水证明
        handleSerialNum(item, label, key, auditStatus) {
            this.openSerial = true
            this.serialId = item.id
            this.filelLabel = label
            this.filelKey = key
            this.fileList = item[key] ? item[key].split(',').map(item => { return { url: item } }) : []
            this.filelauditStatus = auditStatus

        },
        // 上传预处理
        beforeUpload(file) {
            if (file.type.indexOf("image/") == -1) {
                this.$modal.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
            } else {
                const reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = () => {
                    this.options.img = reader.result;
                };
            }
        },
        // 文件上传中处理
        // handleFileUploadProgress(event, file, fileList) {
        //     this.upload.isUploading = true;
        // },
        // 文件上传成功处理
        handleFileSuccess(response, file, fileList) {
            this.fileList = fileList
        },   //文件移除操作
        handleRemove(file, fileList) {
            this.fileList = fileList//或者data.fileList = []; //清空fileList所有数组    
        },
        handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 ${this.fileLimitNum} 个文件`);
        },
        // 提交上传文件
        submitFileForm() {
            this.$refs.upload.submit();
        },
        // 提交流水证明
        submitFormSerial() {
            let that = this

            if (this.fileList.length == 0) {
                this.$message.warning(`请上传文文件`);
                return
            }
            let serialNum = []
            for (var i in this.fileList) {
                if (this.fileList[i].response) {
                    serialNum.push(this.fileList[i].response.data)
                }
                else {
                    serialNum.push(this.fileList[i].url)
                }
            }
            let params = {}
            params.id = this.serialId
            params.auditStatus = this.filelauditStatus
            console.log(this.filelKey);
            params[this.filelKey] = serialNum.join()
            updateInfo(params).then(response => {
                that.$modal.msgSuccess("操作成功");
                that.getList();
                this.fileList = []
                this.openSerial = false
                this.openDetail = false
            });

        },
        // 提交流水证明
        cancelSerial() {
            this.fileList = []
            this.openSerial = false
            this.showroomStructure = false
        },
        // 提交与核准房屋证明
        submitroomStructure() {

            let that = this
            this.$refs["form"].validate(valid => {
                if (valid) {

                    updateInfo({
                        id: that.serialId,
                        roomStructure: that.form.roomStructure,
                        auditStatus: 2
                    }).then(response => {
                        that.$modal.msgSuccess("核准成功");
                        that.getList();
                        that.showroomStructure = false

                        that.openDetail = false;
                    });
                }
            });
        }
    }
};
</script>
